<template>
  <div class="app-container home">

    <el-card  v-hasPermi="['inProcessWorkflowAdmin','toDoWorkflowAdmin','finishedWorkflowAdmin','copyWorkflowAdmin']"  class="box-card">
      <div slot="header" class="clearfix">
        <span>工作流任务</span>
      </div>
      <el-row :gutter="20" class="panel-group">
      <el-col v-hasPermi="['inProcessWorkflowAdmin']" :xs="24" :sm="24" :lg="6" class="card-panel-col">
        <router-link to="/workflowAdmin/inProcessWorkflowAdmin">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-shopping">
              <svg-icon icon-class="edit" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                我在办的
              </div>
              <count-to :start-val="0" :end-val="inProcessWorkflowTotal" :duration="3000" class="card-panel-num" />
            </div>
          </div>
        </router-link>
      </el-col>
      <el-col v-hasPermi="['toDoWorkflowAdmin']" :xs="24" :sm="24" :lg="6" class="card-panel-col">
        <router-link to="/workflowAdmin/toDoWorkflowAdmin">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-money">
              <svg-icon icon-class="question" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                我待办的
              </div>
              <count-to :start-val="0" :end-val="toDoWorkflowTotal" :duration="3200" class="card-panel-num" />
            </div>
          </div>
        </router-link>
      </el-col>
      <el-col v-hasPermi="['copyWorkflowAdmin']" :xs="24" :sm="24" :lg="6" class="card-panel-col">
        <router-link to="/workflowAdmin/copyWorkflowAdmin">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-message">
              <svg-icon icon-class="icon" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                抄送我的
              </div>
              <count-to :start-val="0" :end-val="copyWorkflowTotal" :duration="3600" class="card-panel-num" />
            </div>
          </div>
        </router-link>
      </el-col>
      <el-col v-hasPermi="['finishedWorkflowAdmin']" :xs="24" :sm="24" :lg="6" class="card-panel-col">
        <router-link to="/workflowAdmin/finishedWorkflowAdmin">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="peoples" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                我参与的
              </div>
              <count-to :start-val="0" :end-val="finishedWorkflowTotal" :duration="2600" class="card-panel-num" />
            </div>
          </div>
        </router-link>
      </el-col>
      </el-row>
    </el-card>

    <el-divider  v-hasPermi="['inProcessWorkflowAdmin','toDoWorkflowAdmin','finishedWorkflowAdmin','copyWorkflowAdmin']"  />

    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :sm="24" :lg="12" style="padding-left: 20px">
          <h2>多聚合</h2>
          <p>
            为梦想而创作：致力于开源免费功能集成，为广大程序员同行集成各种常见功能模块
          </p>
          <p>
            为生存而努力：提供技术支持和承接各类小系统开发，联系微信:duojuhe
          </p>
          <p>
            <el-tag type="danger">&yen;免费开源</el-tag>
          </p>

          <p>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-cloudy"
              plain
              @click="goTarget('https://gitee.com/duojuhe/duojuheAdmin')"
            >访问码云</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-s-home"
              plain
              @click="goTarget('http://www.duojuhe.com')"
            >访问主页</el-button
            >
          </p>

        </el-col>

        <el-col :sm="24" :lg="12" style="padding-left: 50px">
          <el-row>
            <el-col :span="12">
              <h2>技术选型</h2>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <h4>后端技术</h4>
              <ul>
                <li>SpringBoot</li>
                <li>Shiro</li>
                <li>MyBatis</li>
                <li>Druid</li>
                <li>Fastjson</li>
                <li>...</li>
              </ul>
            </el-col>
            <el-col :span="6">
              <h4>前端技术</h4>
              <ul>
                <li>Vue</li>
                <li>Vuex</li>
                <li>Element-ui</li>
                <li>Axios</li>
                <li>...</li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-divider />

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>联系信息</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：<el-link
              href="http://www.duojuhe.com"
              target="_blank"
            >http://www.duojuhe.com</el-link
            >
            </p>
            <p>
              <i class="el-icon-user-solid"></i> 联系微信号：duojuhe<!--<s>duojuhe</s>-->
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 微信：<a
              href="javascript:;"
            >/ HF(*飞)</a
            >
            </p>
            <p>
              <i class="el-icon-money"></i> 支付宝：<a
              href="javascript:;"
              class="支付宝信息"
            >/ HF(*飞)</a
            >
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion>
            <el-collapse-item title="v1.0.0 - 2021-12-08">
              <ol>
                <li>多聚合前后端分离系统正式发布</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v1.0.1 - 2022-03-08">
              <ol>
                <li>增加问卷调查模块</li>
                <li>增加工作流模块</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v1.0.2 - 2022-05-08">
              <ol>
                <li>增加多聊在线聊天模块</li>
                <li>增加网络拓扑图模块</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v1.0.3 - 2022-07-22">
              <ol>
                <li>完善工作流模块各模块功能</li>
                <li>新增工作流办理各类消息通知提醒</li>
              </ol>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>捐赠支持</span>
          </div>
          <div class="body">
            <img
              src="@/assets/images/mypay.jpg"
              alt="donate"
              width="100%"
            />
            <span style="display: inline-block; height: 30px; line-height: 30px"
            >你可以请作者喝杯咖啡表示鼓励</span
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import CountTo from 'vue-count-to'
  export default {
    components: {
      CountTo
    },
    name: "Index",
    data() {
      return {
        copyWorkflowTotal: 0,
        finishedWorkflowTotal: 0,
        toDoWorkflowTotal: 0,
        inProcessWorkflowTotal:0
      }
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
    },
  };
</script>
<style lang="scss" scoped>
  .panel-group {
    .card-panel {
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>

